<template>
  <view class="service-footer safe-area-inset-bottom">
    <view class="service-footer__actions">
      <view 
        v-for="(item, index) in actions" 
        :key="index" 
        class="service-footer__icon-btn" 
        @click="onActionClick(item.event)"
      >
        <text class="service-footer__icon">{{ item.icon }}</text>
        <text class="service-footer__icon-text">{{ item.text }}</text>
      </view>
    </view>
    <view class="service-footer__buttons">
      <slot name="buttons">
        <button 
          class="service-footer__btn service-footer__btn--buy" 
          :disabled="disabled"
          @click="onButtonClick"
        >
          {{ buttonText }}
        </button>
      </slot>
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  actions: {
    type: Array,
    default: () => [
      { icon: '🏠', text: '首页', event: 'home' },
      { icon: '🏪', text: '商家', event: 'provider' },
      { icon: '💬', text: '客服', event: 'contact' }
    ]
  },
  buttonText: {
    type: String,
    default: '立即预约'
  },
  disabled: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['action-click', 'button-click']);

const onActionClick = (event) => {
  emit('action-click', event);
};

const onButtonClick = () => {
  emit('button-click');
};
</script>

<style lang="scss" scoped>
.service-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  
  &__actions {
    display: flex;
    align-items: center;
  }
  
  &__icon-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 20px;
  }
  
  &__icon {
    font-size: 20px;
    margin-bottom: 2px;
  }
  
  &__icon-text {
    font-size: 12px;
    color: #666;
  }
  
  &__buttons {
    flex: 1;
    display: flex;
    justify-content: flex-end;
  }
  
  &__btn {
    font-size: 16px;
    padding: 0 25px;
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
    margin: 0;
    
    &--buy {
      background-color: #07c160;
      color: #fff;
      
      &:disabled {
        background-color: #a8e2c2;
      }
    }
  }
}

.safe-area-inset-bottom {
  padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */
  padding-bottom: env(safe-area-inset-bottom); /* iOS 11.2+ */
}
</style>
